/* stylelint-disable at-rule-no-unknown,at-rule-empty-line-before */
@import "../../../style/default";

/* apes-timeline */
$time-line-prefix-cls: #{$style-prefix}-timeline;


.#{$time-line-prefix-cls} {
  @include reset-component;
  list-style: none;
  margin: 0;
  padding: 0;

  &-item {
    position: relative;
    padding: 0 0 10px;
    list-style: none;
    margin: 0;
    font-size: $font-size-base;

    &-tail {
      position: absolute;
      left: 4px;
      top: 0.75em;
      height: 100%;
      border-left: 2px solid $time-line-color;
    }

    &-pending &-head {
      font-size: $font-size-sm;
    }

    &-pending &-tail {
      display: none;
    }

    &-head {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: $component-background;
      border-radius: 100px;
      border: 2px solid transparent;

      &-blue {
        border-color: $info-color;
        color: $info-color;
      }
      &-red {
        border-color: $error-color;
        color: $error-color;
      }
      &-green {
        border-color: $success-color;
        color: $success-color;
      }
    }

    &-head-custom {
      position: absolute;
      text-align: center;
      line-height: 1;
      margin-top: 0;
      border: 0;
      height: auto;
      border-radius: 0;
      padding: 4px 0px;
      transform: translate(-50%, -50%);
      top: 5px;
      left: 5px;
      width: auto;
      i {
        font-size: 18px;
      }
    }

    &-content {
      padding: 0 0 0 18px;
      position: relative;
      top: -($font-size-base * $line-height-base - $font-size-base) + 1px;
      white-space: pre-line;
    }

    &-last {
      .#{$time-line-prefix-cls}-item-tail {
        display: none;
      }
      .#{$time-line-prefix-cls}-item-content {
        min-height: 48px;
      }
    }
  }

  &-type {
    .#{$time-line-prefix-cls}-item {
      margin: 0 16px;
    }
    .#{$time-line-prefix-cls}-item-tail {
      position: absolute;
      left: 3px;
      top: 0.75em;
      height: 100%;
      border-left: 4px solid $time-line-border;
    }
    .#{$time-line-prefix-cls}-item-head-custom {
      margin-top: 5px;
      border: 4px solid $time-line-border;
      background: $time-line-main-bg;
      border-radius: 50%;
      //padding: 1px;
      width: 35px;
      height: 35px;
      i {
        //font-size:19px;
        color: $time-line-icon;
      }
    }
    .#{$time-line-prefix-cls}-item-OA {
      padding-top: 5px;
      color: $time-line-icon;
      font-weight: 700;
    }
    .#{$time-line-prefix-cls}-item-content {
      padding-left: 35px;
      .#{$time-line-prefix-cls}-main {
        position: relative;
        border: 1px solid $time-line-main-border;
        border-radius: $border-radius-base;
        //min-height: 50px;
        padding: 5px 15px;
        //box-shadow: 1px 1px 3px $time-line-main-border-shadow;
        background: $time-line-main-bg;
        color: $time-line-text;
        //display: flex;
        //justify-content: space-between;
        &:after {
          right: 100%;
          border: 7px solid transparent;
          border-right-color: $time-line-main-border;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
          top: 8px;
        }
        &.finished{
          color: black;
        }
        .#{$time-line-prefix-cls}-main-top {
          @include clearfix;
        }
        .#{$time-line-prefix-cls}-main-bottom {
          margin: 8px 8px 0;
        }
        .#{$time-line-prefix-cls}-operate {
          display: inline-block;
          border: 1px solid $time-line-main-operate;
          border-radius: $border-radius-base;
          padding: 0 5px;
          color: $time-line-main-operate;
          background:$time-line-main-operate-bg;
          margin-right: 15px;
          &.orange {
            color: #fa8c16;
            background: #fff7e6;
            border-color: #ffd591;
          }
        }
        .#{$time-line-prefix-cls}-name {
          display: inline-block;
        }
        .#{$time-line-prefix-cls}-date {
          float: right;
        }
        .#{$time-line-prefix-cls}-remark {
          //margin-top: 5px;
          //border: 1px solid $time-line-main-color;
          //border-radius: $border-radius-base;
          //background: #fefefe;
          //padding: 0 5px;
          width: 100%;
          //line-height: initial;
        }
        .#{$time-line-prefix-cls}-bottom-div {
          margin-bottom: 8px;
        }
        .#{$time-line-prefix-cls}-bottom-span {
          margin-right: 16px;
          color: $primary-color;
          cursor: pointer;
        }

      }
    }
  }

  &-pending &-item-last &-item-tail {
    border-left: 2px dotted $time-line-color;
    display: block;
  }

  &-reverse &-item-last &-item-tail {
    display: none;
  }

  &-reverse &-item-pending {
    .#{$time-line-prefix-cls}-item-tail {
      border-left: 2px dotted $time-line-color;
      display: block;
    }
    .#{$time-line-prefix-cls}-item-content {
      min-height: 48px;
    }
  }
}

// 定制
.waybill-particulars-timeline {
  .apes-timeline-item-last {
    .apes-timeline-item-content{
      min-height: auto;
    }
  }
}
